<template>
  <div class="search" :style="searchWidth">
    <div class="content" :style="heig">
      <div class="left" v-show="!flag">
        <div class="sort" v-show="props.isSortShow">
          <div>
            <component
              is="Sort"
              style="
                width: 20px;
                height: 20px;
                color: rgb(36, 63, 193);
                margin-top: 5px;
                margin-left: 15px;
              "
            /><span style="margin-left: 10px; margin-top: 5px">排序</span>
            <ul>
              <li :class="{ active: 0 === tabFlag }" @click="tab(0),$emit('sort1')">
                默认排序
              </li>
              <li :class="{ active: 1 === tabFlag }" @click="tab(1),$emit('sort2')">
                {{ props.str1 }}<el-icon><Bottom /></el-icon>
              </li>
              <li :class="{ active: 2 === tabFlag }" @click="tab(2),$emit('sort3')">
                {{ props.str2 }}<el-icon><Bottom /></el-icon>
              </li>
            </ul>
          </div>
        </div>
        <div class="select">
          <slot>
            <div>
              <component
                is="Filter"
                style="
                  width: 20px;
                  height: 20px;
                  color: rgb(36, 63, 193);
                  margin-top: 5px;
                  margin-left: 15px;
                "
              /><span style="margin-left: 10px; margin-top: 5px">筛选</span>
              <label style="margin-left: 20px">商品分类:</label
              ><el-select
                v-model="catOne"
                class="m-2"
                placeholder="请选择一级分类"
                size="large"
                style="margin-left: 20px; width: 160px"
              >
                <el-option value="男装" label="男装">男装</el-option>
                <el-option value="女装" label="女装">女装</el-option>
              </el-select>
              <el-select
                v-model="catTwo"
                class="m-2"
                placeholder="请选择二级分类"
                size="large"
                style="width: 160px"
              >
                <el-option value="衬衫" label="衬衫">衬衫</el-option>
                <el-option value="裤子" label="裤子">裤子</el-option>
                <el-option value="短裙" label="短裙">短裙</el-option>
                <el-option value="上衣" label="上衣">上衣</el-option>
              </el-select>
              <label style="margin-left: 30px">价格区间:</label
              ><el-input
                v-model="lowCount"
                style="width: 120px; margin-left: 20px"
                placeholder="请输入最低金额"
                id="lowCount"
              ></el-input>
              至
              <el-input
                v-model="heightCount"
                style="width: 120px"
                placeholder="请输入最高金额"
                id="heightCount"
              ></el-input>
            </div>
          </slot>
        </div>

        <div class="seek">
          <div>
            <component
              is="Search"
              style="
                width: 20px;
                height: 20px;
                color: rgb(36, 63, 193);
                margin-left: 15px;
              "
            />
            <span style="margin-left: 10px">搜索</span>
            <label style="margin-left: 20px">精准搜索:</label>
            <el-input
              v-model="goods"
              style="width: 320px; margin-left: 20px"
              :placeholder="str3"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="right" v-show="!flag">
        <div ref="line1"></div>
        <div ref="line2"></div>
      </div>
    </div>

    <div class="btns">
      <el-button
        :icon="arrows"
        style="background: rgb(23, 28, 73)"
        @click="pickUp"
        >{{ pickUpText }}</el-button
      >
      <el-button
        :icon="RefreshRight"
        style="background: rgb(255, 195, 6)"
        @click="resetSubmit(), $emit('reset')"
        >重置</el-button
      >
      <el-button
        :icon="Search"
        style="background: rgb(33, 61, 192)"
        @click="$emit('myEvent')"
        >查询</el-button
      >
      <input
        v-model="goods"
        type="text"
        class="line"
        v-show="flag"
        placeholder="请输入商品ID或名称"
        id="goodsId"
      />
    </div>
  </div>
</template>

<script setup>
import { Top, RefreshRight, Search } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { lineChart } from "@/utils/chart.js";
import { useStoreSum } from "@/stores/sum.js";
import { getSelectList } from "@/api/goodsData.js";
import { sortBy } from "@/utils/sortArr.js";

const useStore = useStoreSum();

//sort1 默认排序 sort2自定义排序 sort3自定义排序
defineEmits(["myEvent", "reset", "sort1", "sort2", "sort3"]);

const props = defineProps({
  isSortShow: {
    type: Boolean,
    default: true,
  },
  str1: {
    type: String,
    default: "在售价最低",
  },
  str2: {
    type: String,
    default: "月销量最高",
  },
  str3: {
    type: String,
    default: "",
  },
  str4: {
    type: String,
    default: "今日入库商品",
  },
  str5: {
    type: String,
    default: "500件",
  },
  str6: {
    type: String,
    default: "累计入库商品",
  },
  str7: {
    type: String,
    default: "5000件",
  },
  dataArr: {
    type: Array,
    default: [10, 22, 28, 23, 19],
  },
});

const line1 = ref(null);
const line2 = ref(null);

//完成挂载后执行
onMounted(() => {
  var myChart = echarts.init(line1.value);
  var myChart2 = echarts.init(line2.value);
  lineChart(myChart, props.str4, props.str5, props.dataArr);
  lineChart(myChart2, props.str6, props.str7, props.dataArr, "orange");
});

//最高金额
const heightCount = ref("");

//最低金额
const lowCount = ref("");

//一二级分类
const catOne = ref("");
const catTwo = ref("");

//
const goods = ref("");

//控制tab样式
const tabFlag = ref(0);

//是否收起标志
const flag = ref(false);

//设置高度
const heig = ref("height:200px;");
//定义search的默认高度
const searchWidth = ref("height:240px");

//pickUpText 默认内容
const pickUpText = ref("收起");
//arrows箭头指向 默认内容
const arrows = ref("Top");

//向外暴露属性
defineExpose({
  goods,
});

//收起函数,点击时设置高度
function pickUp() {
  flag.value = !flag.value;
  if (flag.value) {
    pickUpText.value = "展开";
    searchWidth.value = "height:80px";
    arrows.value = "Bottom";
    heig.value = "height:0";
  } else {
    pickUpText.value = "收起";
    searchWidth.value = "height:240px";
    arrows.value = "Top";
    heig.value = "height:200px";
  }
}


/**
 * tab
 * 控制上方排序的点击效果
 * @param {number} index
 */
function tab(index) {
  tabFlag.value = index;
  if (index === 0) {
    // emit("sort1");
    getSelectList().then((res) => {
      useStore.goodsSelect = res.data.items;
    });
    
  } else if (index === 1) {
    // emit("sort2");
    const newArr = useStore.goodsSelect.sort(sortBy("price"));
    useStore.goodsSelect = newArr;
  } else if (index === 2) {
    const newArr = useStore.goodsSelect.sort(sortBy("monthlysales"));
    useStore.goodsSelect = newArr;
    // emit("sort3");
  }
}

// 重置按钮
function resetSubmit() {
  catOne.value = "";
  catTwo.value = "";
  goods.value = "";
  lowCount.value = "";
  heightCount.value = "";
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 30px;
  box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
  transition: 0.5s;
  .content {
    display: flex;
    font-size: 14px;
    overflow: hidden;
    transition: 0.5s;
    .left {
      width: 900px;
      height: 100%;
      transition: 0.4s;
      .sort {
        margin-top: 20px;
        transition: 0.5s;
        div {
          display: flex;
          font-weight: 600;
          ul {
            display: flex;
            li {
              transition: 0.5s;
              cursor: pointer;
              margin-left: 20px;
              text-align: center;
              line-height: 32px;
              width: 109px;
              height: 32px;
              border-radius: 20px;
            }
            .active {
              background-color: rgb(33, 61, 192);
              color: white;
            }
          }
        }
      }
      .select {
        margin-top: 20px;
        font-weight: 600;
      }
      .seek {
        margin-top: 15px;
        font-weight: 600;
        div {
          display: flex;
          align-items: center;
        }
      }
    }
    .right {
      width: calc(100% - 900px);
      height: 240px;
      display: flex;
      div {
        width: 200px;
        height: 240px;
      }
    }
  }
  .btns {
    margin-bottom: 20px;
    margin-left: 30px;
    .el-button {
      width: 87px;
      height: 32px;
      color: white;
      :deep(.el-icon) {
        font-size: 20px;
      }
    }
    .line {
      width: 300px;
      margin-left: 30px;
      border-bottom: 4px solid rgb(23, 28, 73);
      padding-left: 100px;
    }
  }
}
</style>
